<script lang="js">
  import { onMount, onDestroy } from 'svelte'
  import PhotoSwipeLightbox from 'photoswipe/lightbox'
  import 'photoswipe/style.css'

  let images = [ { largeURL: 'https://picsum.photos/id/237/2000/3000', thumbnailURL: 'https://picsum.photos/id/237/200/300', width: 2000, height: 3000, }, { largeURL: 'https://picsum.photos/id/238/1600/1000', thumbnailURL: 'https://picsum.photos/id/238/800/500', width: 1600, height: 1000, }, { largeURL: 'https://picsum.photos/id/239/1200/800', thumbnailURL: 'https://picsum.photos/id/239/600/400', width: 1200, height: 800, }, ];
  let lightbox

  onMount(() => {
    lightbox = new PhotoSwipeLightbox({ gallery: '#pswp-gallery', children: 'a', pswpModule: () => import('photoswipe'), })
    lightbox.init()
    return () => {
      if (lightbox) {
        lightbox.destroy()
        lightbox = null
      }
    }
  })

  onDestroy(() => {
    if (lightbox) {
      lightbox.destroy()
      lightbox = null
    }
  })
</script>

<section class="p-4">
  <h1 class="text-xl font-semibold mb-4">图片库 / PhotoSwipe 示例</h1>
  <div id="pswp-gallery" class="flex gap-3 h-80" >
    {#each images as img, i}
      <a href={img.largeURL} data-pswp-width={img.width} data-pswp-height={img.height} data-pswp-caption={`图片 ${i + 1}`} class="block overflow-hidden rounded-lg bg-gray-100 shadow hover:shadow-md transition" >
        <img src={img.thumbnailURL} alt={"缩略图 " + (i + 1)} class="w-full h-full object-cover hover:scale-105 transition-transform duration-200" loading="lazy" />
      </a>
    {/each}
  </div>
</section>
